<template>
  <view :class="{'is-animation': isAnimation}" class="p-pop-x">
    <view :class="{'is-show': [1, 2].includes(show), 'is-hide': show === 2}" class="layer-1">
      <view class="title">
        <text class="em">幸运红包抽取中…</text>
      </view>
      <view class="box">
        <view class="plate">
          <view class="li li-1">谢谢参与</view>
          <view class="li li-2">{{ detail.totalDiscountAmount }}元红包</view>
          <view class="li li-3">{{ oneAmount }}元红包</view>
          <view class="li li-4">{{ twoAmount }}元红包</view>
        </view>
        <view class="round" />
        <view class="timeout">{{ sum >= 0 ? sum : 0 }}秒后自动领取</view>
      </view>
      <view class="user">
        <view class="li">李*刚刚抽中谢谢参与</view>
        <view class="li">王*刚刚抽中谢谢参与</view>
        <view class="li">古*刚刚抽中谢谢参与</view>
        <view class="li">郭*刚刚抽中谢谢参与</view>
        <view class="li">韩*刚刚抽中谢谢参与</view>
        <view class="li">应*刚刚抽中谢谢参与</view>
      </view>
    </view>
    <view :class="{'is-show': show === 2}" class="layer-2" @click="handleSubmit">
      <view class="light" />
      <view class="title">
        <text class="em">您真的太幸运了!</text>
      </view>
      <view class="box">
        <view class="dl">
          <view class="dt">共减</view>
          <view class="amount">
            {{ detail.totalDiscountAmount }}
            <view class="sub">元</view>
          </view>
        </view>
        <view class="button">开心使用</view>
        <view class="timeout">离开失去优惠资格</view>
      </view>
      <view class="circle">
        <view class="li-1"></view>
        <view class="li-2"></view>
      </view>
    </view>
    <view class="_close" @click="handleClose">
      <x-icon name="icon-003" size="50" color="#fff"/>
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';

export default {
  name: 'PPop8',
  components: {
    XIcon
  },
  props: {
    detail: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      isAnimation: false,
      sum: 1,
      show: 1,
      timeout: null
    };
  },
  computed: {
    oneAmount() {
      const discountAmount = this.detail.totalDiscountAmount;
      return this.$tools.formatNumber(discountAmount - discountAmount / 2);
    },
    twoAmount() {
      const discountAmount = this.detail.totalDiscountAmount;
      return this.$tools.formatNumber(discountAmount - discountAmount / 3, 1);
    }
  },
  created() {
    this.isAnimation = true;
    this.countdownA();
  },
  destroyed() {
    if (this.timeout) {
      clearTimeout(this.timeout);
    }
  },
  methods: {
    handleClose() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.$emit('close');
    },
    countdownA() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.sum--;
        if (this.sum >= 0) {
          this.countdownA();
        } else {
          this.sum = 2;
          this.show = 2;
          this.countdownB();
          this.$emit('ready');
        }
      }, 1000);
    },
    countdownB() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.timeout = setTimeout(() => {
        this.sum--;
        if (this.sum >= 0) {
          this.countdownB();
        } else {
          this.$emit('submit');
        }
      }, 1000);
    },
    handleSubmit() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      this.$emit('submit');
    }
  }
};
</script>

<style lang="scss" scoped>
.p-pop-x{
  background: #000; height: 100vh;
  .timeout{ position: absolute; left: 0; bottom: -70px; color: #BCBABC; font-size: 28px; text-align: center; width: 100%;}
  .title{
    width: 100%; color: #FDF6CD; font-size: 70px; text-align: center; font-weight: bold; margin-bottom: 50px; position: relative;
    .em{ position: relative;}
    &:before{ position: absolute; content: ''; width: 65%; height: 50%; background-color: #6c0a07; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); filter: blur(20px);}
  }
  .layer-1{
    height: 100vh; width: 100%; overflow: hidden; display: none; align-items: center; flex-direction: column; justify-content: center; text-align: center;
    .box{
      width: 626px; height: 626px; position: relative;
      .plate{
        width: 100%; height: 100%; background: cdn('/images/pic-010.png') no-repeat; background-size: cover;
        .li{ position: absolute; width: 100%; text-align: center; color: #DD4506; font-weight: bold; font-size: 46px; height: 50px; line-height: 50px;}
        .li-1{ left: -175px; top: 50%; margin-top: -25px; transform: rotate(-90deg);}
        .li-2{ left: 0; top: 110px;}
        .li-3{ right: -175px; top: 50%; margin-top: -25px; transform: rotate(90deg);}
        .li-4{ left: 0; bottom: 110px; transform: rotate(180deg);}
      }
      .round{ position: absolute; width: 165px; height: 207px; left: 50%; top: 188px; margin-left: -83px; background: cdn('/images/pic-012.png') no-repeat; background-size: cover;}
    }
    .user{
      display: flex; padding-top: 140px; width: 400%;
      .li{ background-color: #C3BDA9; color: #563B20; padding: 20px 40px; border-radius: 50px; font-size: 32px; line-height: 1; white-space: nowrap; margin-right: 50px;}
    }
    &.is-show{ display: flex;}
    &.is-hide{
      animation: fadeOut 1s linear forwards;
      .timeout,
      .title{ opacity: 0;}
    }
  }

  .layer-2{
    height: 100vh; width: 100vw; display: none; align-items: center; flex-direction: column; justify-content: center; text-align: center; position: absolute; left: 0; top: 0;
    .box{
      width: 560px; height: 626px; background-color: #FDF7DF; border: 15px solid #604F42; border-radius: 40px; position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column;
      &:before{ content: '抽中大额奖励'; color: #FEFDFF; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 40px; line-height: 1; font-weight: bold; position: absolute; width: 412px; height: 96px; left: 50%; top: 0; transform: translate3d(-50%, 0, 0); background: cdn('/images/pic-013.png') no-repeat; background-size: cover;}
      .dl{ line-height: 1; padding: 120px 0 80px;}
      .dt{ color: $uni-color-primary; font-size: 36px; padding-bottom: 10px;}
      .amount{
        color: $uni-color-primary; position: relative; font-size: 160px; font-weight: bold;
        .sub{ font-weight: normal; font-size: 40px; position: absolute; right: -40px; bottom: 26px;}
      }
      .button{
        width:450px; height: 90px; line-height: 90px; background: linear-gradient(90.08deg, #EC6834 0.07%, #EB4833 99.93%); box-shadow: 0 8px 0 #EC371F, inset 0 0 19px 4px rgba(255, 250, 119, 0.3); border-radius: 50px; color: #fff; font-size: 40px;
      }
    }
    .light{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: cdn('/images/pic-011.png') no-repeat center center; background-size: cover;}
    .circle{
      position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0);
      .li-1,
      .li-2{ border-radius: 50%; width: 500px; height: 500px; border: 10px solid #FDF7DF; position: absolute; left: 50%; top: 50%; transform: translate3d(-50%, -50%, 0); filter: blur(5px);}
    }
    &.is-show{
      display: flex;
      .title{ opacity:0; animation: fadeInLeft .6s .3s ease-in forwards;}
      .box{ opacity: 1; animation: zoomInBox .6s ease-in forwards;}
      .button{ animation: blink-animation 1s infinite;}
      .circle .li-1{ opacity: 0; animation: circleIn 1s .1s ease-out forwards;}
      .circle .li-2{ opacity: 0; animation: circleIn 1s .5s ease-out forwards;}
      .light { animation: fadeOut .5s 1.4s ease-out forwards;}
    }
  }

  ._close{ position: absolute; right: 50px; top: 250px;}

  &.is-animation{
    .layer-1{
      .title{ opacity:0; animation: fadeInLeft .6s .3s ease-in forwards;}
      .plate{ opacity: 0; animation: plateIn 1.8s .1s ease-out forwards;}
      .round{ opacity: 0; animation: fadeIn 1.8s .1s ease-out forwards;}
      .user{ opacity: 0; animation: slideIn 4s .1s linear forwards;}
    }
  }
}

@keyframes slideIn {
  0% {
    opacity:0;
    transform:translate3d(30%, 0, 0)
  }
  20%{
    opacity:1;
  }
  to {
    opacity:1;
    transform:translate3d(10%, 0, 0)
  }
}

@keyframes fadeInLeft {
  0% {
    opacity:0;
    transform:translate3d(-100%, 0, 0)
  }
  to {
    opacity:1;
    transform:translateZ(0)
  }
}

@keyframes plateIn {
  0%{
    opacity: 0;
    transform: rotate(2000deg);
  }
  100%{
    transform: rotate(360deg);
    opacity: 1;
  }
}

@keyframes circleIn {
  0%{
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale3d(.2, .2, .2);
  }
  10%{
    opacity: 1;
  }
  80%{
    opacity: 1;
  }
  100%{
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale3d(7, 7, 7);
  }
}

@keyframes zoomInBox {
  0% {
    transform:scale3d(.1, .1, .1)
  }
  80% {
    transform:scale3d(1.2, 1.2, 1.2)
  }
  to {
    transform:scale3d(1, 1, 1)
  }
}

@keyframes zoomIn {
  0% {
    opacity:0;
    transform:scale3d(.3, .3, .3)
  }
  to {
    opacity:1;
  }
}

@keyframes fadeIn {
  0% {
    opacity:0;
  }
  to {
    opacity:1;
  }
}

@keyframes fadeOut {
  0% {
    opacity:1;
  }
  to {
    opacity:0;
  }
}

@keyframes blink-animation {
  0% {
    transform:scale3d(.9, .9, .9)
  }
  50% {
    transform:scale3d(1, 1, 1)
  }
  100% {
    transform:scale3d(.9, .9, .9)
  }
}

</style>
